<template>
  <!-- <div class="parent"> -->
  <div class="small_nav">
    <ul>
      <li @click="canguanxuzhi()">
        <img src="../../assets/image/canguan.png" alt />

        <span>参观须知</span>
      </li>
      <li @click="zixun">
        <img src="../../assets/image/zhengji.png" alt />

        <span>咨询建议</span>
      </li>
      <li class="jj_parent" @mouseover="enter" @mouseout="out">
        <img src="../../assets/image/yuyue.png" alt />
        <span>讲解预约</span>

        <div class="enter_k_parent">
          <div class="enter_k" :style="w">
            <p>
              <span>请联系宣传教育部门</span>
            </p>
            <p>
              <span>
                电话:
                <span class="num">0580-8230565</span>
              </span>
            </p>
          </div>
        </div>
      </li>
      <li @click="zhengji">
        <img src="../../assets/image/shuxie.png" alt />

        <span>征集</span>
      </li>
      <li @click="zhiyuan">
        <img src="../../assets/image/zhiyuan.png" alt />

        <span>志愿者</span>
      </li>
      <li @click="xiazaizhongxin">
        <img src="../../assets/image/xiazai.png" alt />

        <span>下载中心</span>
      </li>
    </ul>
  </div>
  <!-- </div> -->
</template>
<script>
import { JudgeLogin } from "../../api/login";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      w: {
        width: 0,
      },
    };
  },
  methods: {
    ...mapActions(["isShow"]),
    canguanxuzhi() {
      this.$router
        .push({
          path: "/canguanxuzhi",
          query: {
            content: this.search_content,
            orderId: this.i,
            sort: this.sort,
          },
        })
        .catch((err) => {
          err;
        });
    },
    zixun() {
      this.$router.push("/zixunjianyi").catch((err) => {
        err;
      });
    },
    zhengji() {
      this.$router
        .push({
          path: "/zhengji",
          query: {
            content: this.search_content,
            orderId: this.i,
            sort: this.sort,
          },
        })
        .catch((err) => {
          err;
        });
    },
    zhiyuan() {
      this.$router
        .push({
          path: "/zhidujianshe/zhiyuanzhezhijia/:id",
          query: { orderId: "志愿者之家" },
        })
        .catch((err) => {
          err;
        });
    },
    xiazaizhongxin() {
      this.$router
        .push({
          path: "/xiazaizhongxin",
          query: {
            content: this.search_content,
            orderId: this.i,
            sort: this.sort,
          },
        })
        .catch((err) => {
          err;
        });
    },
    enter() {
      this.w.width = "150px";
    },
    out() {
      this.w.width = "0px";
    },
  },
};
</script>
<style scoped>
/* youce nav */
a {
  text-decoration: none;
}
.parent {
  /* position: relative; */
}
ul {
  padding: 0px;
  margin: 0px;
}
.small_nav {
  position: fixed;
  top: 50%;
  margin-top: -162px;

  height: 325px;

  right: 10px;
  z-index: 999;
}
li {
  list-style: none;
  cursor: pointer;
}
.small_nav img {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}
.small_nav li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  flex-direction: column;
  width: 52px;
  height: 52px;
  background: rgb(48, 68, 108);
  opacity: 0.9;
}
.small_nav li span {
  font-size: 12px;
  color: white;
}
.jj_parent {
  position: relative;
}
.enter_k_parent {
  position: absolute;
  z-index: -100;
  right: 50px;
  top: 0px;

  height: 52px;
  text-align: center;
}
.enter_k p {
  width: 150px;
  height: 20px;
  padding: 0px;
  margin: 0px;
}
.enter_k {
  width: 180px;
  height: 52px;

  float: right;
  overflow: hidden;

  background: rgb(48, 68, 108);
  opacity: 0.9;
  transition: width 0.5s linear;
}
.enter_k .num {
  color: pink;
}
</style>
